<template>
  <!-- 基本信息组件 -->
  <el-form :model="form" :inline="true" class="form-cls" :rules="rules">
    <el-form-item>
      <!-- <el-form-item prop="name"> -->
      <template #label>
        <el-tooltip
          class="box-item"
          effect="dark"
          content="项目名称"
          placement="top"
        >
          <span class="formLabel">项目名称</span>
        </el-tooltip>
      </template>
      <el-input v-model="form.projectName"></el-input>
    </el-form-item>
    <el-form-item>
      <!-- <el-form-item prop="name"> -->
      <template #label>
        <span class="formLabel">项目编号</span>
      </template>
      <el-input v-model="form.infoNumber"></el-input>
    </el-form-item>
    <el-form-item>
      <!-- <el-form-item prop="name"> -->
      <template #label>
        <span class="formLabel">报名时间</span>
      </template>
      <!-- <el-input v-model="form.applyStartTime"></el-input> -->
      <el-date-picker
        style="width: 100%"
        v-model="form.applyStartTime"
        type="datetime"
        format="YYYY-MM-DD HH:mm:ss"
        value-format="YYYY-MM-DD HH:mm:ss"
        placeholder="请选择时间"
      />
    </el-form-item>
    <el-form-item>
      <!-- <el-form-item prop="name"> -->
      <template #label>
        <span class="formLabel">报名结束时间</span>
      </template>
      <!-- <el-input v-model="form.applyStartTime"></el-input> -->
      <el-date-picker
        style="width: 100%"
        v-model="form.applyEndTime"
        type="datetime"
        format="YYYY-MM-DD HH:mm:ss"
        value-format="YYYY-MM-DD HH:mm:ss "
        placeholder="请选择时间"
      />
    </el-form-item>
    <el-form-item>
      <!-- <el-form-item prop="name"> -->
      <template #label>
        <span class="formLabel">公告发布时间</span>
      </template>
      <!-- <el-input v-model="form.announcementTime"></el-input> -->
      <el-date-picker
        style="width: 100%"
        v-model="form.announcementTime"
        type="datetime"
        format="YYYY-MM-DD HH:mm:ss"
        value-format="YYYY-MM-DD HH:mm:ss"
        placeholder="请选择时间"
      />
    </el-form-item>
    <el-form-item>
      <!-- <el-form-item prop="name"> -->
      <template #label>
        <span class="formLabel">拍卖开始时间</span>
      </template>
      <!-- <el-input v-model="form.auctionStartTime"></el-input> -->
      <el-date-picker
        style="width: 100%"
        v-model="form.auctionStartTime"
        type="datetime"
        format="YYYY-MM-DD HH:mm:ss"
        value-format="YYYY-MM-DD HH:mm:ss"
        placeholder="请选择时间"
      />
    </el-form-item>
    <el-form-item>
      <!-- <el-form-item prop="name"> -->
      <template #label>
        <span class="formLabel">监管金额到账截止时间</span>
      </template>
      <!-- <el-input v-model="form.backletterEndTime"></el-input> -->
      <el-date-picker
        style="width: 100%"
        v-model="form.backletterEndTime"
        type="datetime"
        format="YYYY-MM-DD HH:mm:ss"
        value-format="YYYY-MM-DD HH:mm:ss"
        placeholder="请选择时间"
      />
    </el-form-item>
    <el-form-item>
      <!-- <el-form-item prop="name"> -->
      <template #label>
        <span class="formLabel">监管金额</span>
      </template>
      <el-input v-model="form.backletterMoney"></el-input>
    </el-form-item>
    <el-form-item>
      <!-- <el-form-item prop="name"> -->
      <template #label>
        <span class="formLabel">限时竞价开始时间</span>
      </template>
      <!-- <el-input v-model="form.biddingStartTime"></el-input> -->
      <el-date-picker
        style="width: 100%"
        v-model="form.biddingStartTime"
        type="datetime"
        format="YYYY-MM-DD HH:mm:ss"
        value-format="YYYY-MM-DD HH:mm:ss"
        placeholder="请选择时间"
      />
    </el-form-item>
    <el-form-item>
      <!-- <el-form-item prop="name"> -->
      <template #label>
        <span class="formLabel">出让年限</span>
      </template>
      <el-input v-model="form.periodTransfer"></el-input>
    </el-form-item>
    <el-form-item>
      <!-- <el-form-item prop="name"> -->
      <template #label>
        <span class="formLabel">所属行政区</span>
      </template>
      <el-input v-model="form.administrativeRegion"></el-input>
    </el-form-item>
    <el-form-item>
      <!-- <el-form-item prop="name"> -->
      <template #label>
        <span class="formLabel">起始价</span>
      </template>
      <el-input v-model="form.startingPrice"></el-input>
    </el-form-item>
    <el-form-item>
      <!-- <el-form-item prop="name"> -->
      <template #label>
        <span class="formLabel">竞价增价幅度</span>
      </template>
      <el-input v-model="form.rangePrice"></el-input>
    </el-form-item>
    <el-form-item>
      <!-- <el-form-item prop="name"> -->
      <template #label>
        <span class="formLabel">采矿权位置</span>
      </template>
      <el-input v-model="form.diggingsAddress"></el-input>
    </el-form-item>
    <el-form-item>
      <!-- <el-form-item prop="name"> -->
      <template #label>
        <span class="formLabel">开采方式</span>
      </template>
      <el-input v-model="form.miningWay"></el-input>
    </el-form-item>
    <el-form-item>
      <!-- <el-form-item prop="name"> -->
      <template #label>
        <span class="formLabel">资源储备</span>
      </template>
      <el-input v-model="form.resourceReserve"></el-input>
    </el-form-item>
    <!-- <el-form-item>
      <template #label>
        <span class="formLabel">开采矿种</span>
      </template>
      <el-input v-model="form.minerals"></el-input>
    </el-form-item> -->
    <el-form-item>
      <!-- <el-form-item prop="name"> -->
      <template #label>
        <span class="formLabel">矿区面积</span>
      </template>
      <el-input v-model="form.miningArea"></el-input>
    </el-form-item>
    <el-form-item>
      <!-- <el-form-item prop="name"> -->
      <template #label>
        <span class="formLabel">设计规范</span>
      </template>
      <el-input v-model="form.designScale"></el-input>
    </el-form-item>
    <el-form-item>
      <!-- <el-form-item prop="name"> -->
      <template #label>
        <span class="formLabel">是否有底价</span>
      </template>
      <el-input v-model="form.isFloorPrice"></el-input>
    </el-form-item>
    <el-form-item>
      <!-- <el-form-item prop="name"> -->
      <template #label>
        <span class="formLabel">资源储备类型</span>
      </template>
      <el-input v-model="form.resourceType"></el-input>
    </el-form-item>
    <el-form-item>
      <!-- <el-form-item prop="name"> -->
      <template #label>
        <span class="formLabel">标高</span>
      </template>
      <el-input v-model="form.elavation"></el-input>
    </el-form-item>
    <el-form-item>
      <!-- <el-form-item prop="name"> -->
      <template #label>
        <span class="formLabel">竞买人条件</span>
      </template>
      <el-input v-model="form.bidderConditions"></el-input>
    </el-form-item>
    <el-form-item>
      <!-- <el-form-item prop="name"> -->
      <template #label>
        <span class="formLabel">矿产资源开发利用要求</span>
      </template>
      <el-input v-model="form.exploitRequire"></el-input>
    </el-form-item>
  </el-form>

  <!-- <div>
    <el-button type="warning" @click="save">测试</el-button>
  </div> -->
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import type { FormRules } from "element-plus";
import axios from "axios";
import { postAction } from "@/utils/system/commonUse";
import request from "@/utils/system/request";
import { ElMessage } from "element-plus";
import { getCurrentInstance, ComponentInternalInstance } from "vue";
// 表单数据
const form = reactive({
  projectName: "",
  bidderConditions: "",
  elavation: "",
  resourceType: "",
  isFloorPrice: "",
  designScale: "",
  miningArea: "",
  minerals: "",
  resourceReserve: "",
  miningWay: "",
  diggingsAddress: "",
  rangePrice: "",
  startingPrice: "",
  administrativeRegion: "",
  periodTransfer: "",
  biddingStartTime: new Date(),
  exploitRequire: "",
  backletterMoney: "",
  backletterEndTime: new Date(),
  auctionStartTime: new Date(),
  applyStartTime: new Date(),
  infoNumber: "",
  applyEndTime: new Date(),
  announcementTime: new Date(),
  id: sessionStorage.getItem("id"),
});
const rules = reactive<FormRules>({
  name: [
    { required: true, message: "Please input Activity name", trigger: "blur" },
    { min: 3, max: 5, message: "Length should be 3 to 5", trigger: "blur" },
  ],
});

//获取实例($bus)   mitt
const { appContext } = getCurrentInstance() as ComponentInternalInstance;
// 发布事件
appContext.config.globalProperties.$bus.emit("formList", form);
// const bus = () => {
//   appContext.config.globalProperties.$bus.emit("formList", form);
//   console.log("发布", form);
// };
defineExpose({
  form,
});
const test = () => {
  console.log(1);
};
onMounted(() => {
  // bus();
  // getIdApi();
});
// 获取后端返回来得id
// const getIdApi = () => {
//   axios({
//     url: "http://192.168.176.73:8111/project/generateProjectId",
//     // url: "http://192.168.223.73:8111/project/generateProjectId",
//     method: "get",
//   })
//     .then(({ data }) => {
//       console.log(data);
//       form.id = data.data;
//       sessionStorage.setItem("id", data.data);
//     })
//     .catch((err) => {
//       console.log(err);
//     });

// request({ url: url.getId })
// postAction(url.getId, form, { responseType: "blob" })
//   .then(({ data }) => {
//     console.log(data);
//   })
//   .catch((err) => {
//     console.log(err);
//   });
// };
// 服务器地址
const url = reactive({
  // 第一次获取后端给的id
  getId: "/zs/ls",
  saveEditorUrl: "/project/saveOrUpdate",
});
// const save = () => {
//   postAction(url.saveEditorUrl, form)
//     .then((data: any) => {
//       console.log(data);

//       if (data.code != 1000) {
//         return ElMessage.error(data.msg);
//       }
//       console.log(data);
//     })
//     .catch((err) => {
//       console.log(err);
//     });
// };
</script>

<style lang="scss" scoped>
.form-cls {
  margin: 20px 0 35px 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  .el-form-item {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 0 0 22%;
    // box-sizing: border-box;
    .el-form-item__label {
      width: 100px !important;
    }
  }
}
// form 表单
.formLabel {
  /* 固定最大宽度 */
  max-width: 70px;
  min-width: 70px;
  /* 不换行 */
  white-space: nowrap;
  /* 超出部分隐藏 */
  overflow: hidden;
  /* 文本超出时，显示省略标记 */
  text-overflow: ellipsis;
}
</style>
